<!--  -->
<template>
  <el-pagination
    v-model:current-page="thisCurrentPage"
    v-model:page-size="thisPageSize"
    class="mt-4 float-right"
    :page-sizes="pageSizes"
    layout="total,sizes,prev,pager,next,jumper"
    :total="totals"
  />
</template>

<script>
import { defineComponent, computed } from 'vue'
// import { ElPagination } from 'element-plus'

export default defineComponent({
  name: 'BasicPagination',
  components: {
    // ElPagination
  },
  props: {
    pageNo: {
      type: [Number, String],
      default: 1
    },
    pageSize: {
      type: [Number, String],
      default: 20
    },
    totals: {
      type: [Number, String],
      default: 0
    },
    pageSizes: {
      type: Array,
      default: () => {
        return [20, 40, 60, 100]
      }
    }
  },
  emits: ['update:page'],
  setup(props, { emit }) {
    const thisCurrentPage = computed({
      get() {
        return props.pageNo
      },
      set(value) {
        emit('update:page', value)
      }
    })

    const thisPageSize = computed({
      get() {
        return props.pageSize
      },
      set(value) {
        emit('update:page', 1, value)
      }
    })

    return {
      thisCurrentPage,
      thisPageSize
    }
  }
})
</script>

<style lang="scss" scoped></style>
